<!DOCTYPE html>
<html>
	<head>
		<title>testEventDelegation</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="js/EventUtil.js"></script>
	</head>
	<body>
		<ul id="myLinks">
			<li id="goSomewhere">Go somewhere</li>
			<li id="doSomething">Do something</li>
			<li id="sayHi">Say hi</li>
		</ul>
		<script type="text/javascript">
			
			var list = document.getElementById('myLinks');
			
			EventUtil.addHandler(list,'click',function(event){
				event = EventUtil.getEvent(event);
				var target = EventUtil.getTarget(event);
				switch(target.id){
					case 'goSomewhere':
						document.title = "I changed the document's title";
						break;
					case 'doSomething':
						location.href = 'http://www.wrox.com';
						break;
					case 'sayHi':
						alert('hi');
						break;
				}
			});
			
		</script>
	</body>
</html>